<template>
	<view :class="'custom-message-v2 ' + (isMine ? 'my-message' : '')">
		<view class="info">
			<view class="title">{{ trueMessage.title }}</view>
			<view class="intro">{{ trueMessage.intro }}</view>
			<view class="from">来自 {{ trueMessage.from.name }}</view>
		</view>
		<view class="content">
			{{ trueMessage.content }}
		</view>
		<view class="options">
			<view v-for="option in trueMessage.options" :key="option.name" :class="{disabled: option.disabled, option: true}">
				{{ option.disabled ? option.disabledName : option.name }}
			</view>
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			trueMessage: {}
		}
	},
	props: {
		message: {
			type: Object,
		},
		isMine: {
			type: Boolean,
			default: true,
		}
	},
	watch: {
		message: {
			handler: function(newVal) {
				this.trueMessage = newVal.payload
			},
			immediate: true,
			deep: true
		}
	},
};
</script>
<style>
@import './index.css';
</style>
